<template>
  <div>
    <Row class="dataTable">
      <Col span="3" style="padding: 0 0 0 24px">
        <div class="dataTree">
          <div class="categoryTitle">分类信息</div>
          <Tree :data="treeData" @on-select-change="selectData"></Tree>
        </div>
      </Col>
      <Col span="21" style="padding: 0 24px 0 24px">
        <div class="data-header">
          <span>当前类目: {{level1EditCategory.title}}</span>
          <!--<span style="margin-left: 10px">优先级: {{level1EditCategory.sort}}</span>-->
          <!--<Button style="margin-left: 20px" type="info" @click="updateCategory('')" icon="edit">编辑一级类目</Button>-->
          <Button style="margin-left: 20px" type="primary" @click="createCategory('')" icon="plus">添加一级类目</Button>
          <!--<Button style="margin-left: 20px" type="primary" @click="addTwoLevel" icon="plus">添加二级类目</Button>-->
        </div>
        <Table :columns="columns" :data="tableData" class="dataTable"></Table>
      </Col>
    </Row>
    <!--新增一级类目-->
    <Modal v-model="level1Modal" :mask-closable=false loading="loading" width="450"
           title="类目信息">
      <Form ref="formInline" :label-width="100" :model="category" :key="category.id">
        <FormItem label="分类名称:">
          <Input type="text" :value="category.name" v-model="category.name" icon=""></Input>
        </FormItem>
        <FormItem label="优先级:">
          <Input type="text" :value="category.sort" v-model="category.sort" icon=""></Input>
        </FormItem>
        <FormItem>
          <Button @click="submit1level" type="primary">确定</Button>
          <Button @click="cancel1level">取消</Button>
        </FormItem>
      </Form>
      <div slot="footer"></div>
    </Modal>
    <!--结束一级分类-->
    <!--新增二级类目-->
    <Modal v-model="level2Modal" :mask-closable=false loading="loading" width="450"
           title="二级类目">
      <Form ref="formInline" :label-width="100" :model="twoCategory" :key="twoCategory.id">
        <FormItem label="一级分类名称:">
          <Input type="text" :value="level1EditCategory.name" readonly icon=""></Input>
        </FormItem>
        <FormItem label="分类名称:">
          <Input type="text" :value="twoCategory.name" v-model="twoCategory.name" icon=""></Input>
        </FormItem>
        <FormItem label="优先级:">
          <Input type="text" :value="twoCategory.sort" v-model="twoCategory.sort" icon=""></Input>
        </FormItem>
        <FormItem>
          <Button @click="submit2level" type="primary">确定</Button>
          <Button @click="cancel2level">取消</Button>
        </FormItem>
      </Form>
      <div slot="footer"></div>
    </Modal>
    <!--结束二级分类-->
    <!--删除弹窗提示-->
    <Modal
      v-model="deleteModal"
      title="确认删除"
      @on-ok="confirmDelete"
      @on-cancel="cancelDelete">
      <p>是否确认删除该类目</p>
    </Modal>
    <!--删除弹窗提示-->
  </div>
</template>

<script>
import {getTrees, addCategory, editCategory, delCategory, children} from '../../api/category/categoryApi'
import {deleteTemplate} from '../../api/template/templateApi'
export default {
  name: 'category',
  data () {
    return {
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '子类目',
          key: 'name',
          align: 'center'
        },
        {
          title: '优先级',
          key: 'sort',
          align: 'center'
        },
        {
          title: '类目参数模板',
          key: 'parameter',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.toEditTemplate(params.row.id)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.delTemplate(params.row.id)
                  }
                }
              }, '删除')
            ])
          }
        },
        {
          title: '操作',
          key: 'parameter',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.createCategory(params.row.id)
                  }
                }
              }, '添加子节点'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.updateCategory(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteCategory(params.row.id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      treeData: [],
      tableData: [],
      category: {
        id: '',
        name: '',
        sort: '',
        parentId: ''
      },
      twoCategory: {
        id: '',
        name: '',
        sort: '',
        parentId: ''
      },
      level1EditCategory: {
        id: '',
        name: '',
        sort: ''
      },
      level2AddCategory: {
        id: '',
        name: '',
        sort: ''
      },
      level1Modal: false,
      level2Modal: false,
      level1Category: [],
      level2Category: [],
      level1Name: '',
      level2Name: '',
      firstCategories: [],
      secondCategories: [],
      pids: [],
      deleteModal: false,
      deleteCategoryId: '',
      selectCategoryId: ''
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    createCategory (parentId) {
      this.category = {}
      this.category.parentId = parentId
      this.level1Modal = true
    },
    updateCategory (param) {
      if (param) {
        console.log(param)
        this.level1Modal = true
        this.category = param
      } else {
        this.level1Modal = true
        this.category = this.level1EditCategory
      }
    },
    // addTwoLevel () {
    //   this.level2Modal = true
    // },
    loadData () {
      getTrees(data => {
        this.treeData = data
        let pid = this.selectCategoryId
        this.getChildrenByPid(pid)
      })
    },
    selectData (data) {
      let categoryData = data[0]
      if (categoryData.id === null) {
        this.level1EditCategory = categoryData
        this.tableData = categoryData.children
      } else {
        this.selectCategoryId = categoryData.id
        this.level1EditCategory = categoryData
        this.getChildrenByPid(this.selectCategoryId)
      }
      console.log(categoryData)
      // if (categoryData.children.length > 0 && categoryData.parentId === null) {
      //   this.level1EditCategory = categoryData
      //   this.getChildrenByPid(this.selectCategoryId)
      // } else {
      //   if (categoryData.parentId === null) {
      //     this.level1EditCategory = categoryData
      //     this.tableData = this.getChildrenByPid(this.selectCategoryId)
      //   } else {
      //     this.recursionRoot(this.treeData, categoryData.parentId)
      //     console.log(this.pids)
      //     console.log(categoryData)
      //     let index = this.pids.length - 1
      //     let titleData = this.treeData.filter(value => this.pids[index].id === value.id)[0]
      //     this.level1EditCategory = titleData
      //     this.pids = []
      //     // 子类目表格的数据
      //     this.tableData = this.getChildrenByPid(this.selectCategoryId)
      //   }
      // }
    },
    getChildrenByPid (pid) {
      children(pid, data => {
        this.tableData = data
      })
    },
    submit1level () {
      // 区分添加和编辑
      if (this.category.id) {
        editCategory(this.category, data => {
          this.$Message.success('操作成功')
          this.level1Modal = false
          this.loadData()
        })
      } else {
        addCategory(this.category, data => {
          this.$Message.success('操作成功')
          this.level1Modal = false
          this.loadData()
        })
      }
    },
    cancel1level () {
      this.level1Modal = false
      this.$Message.success('取消成功')
      this.loadData()
    },
    deleteCategory (id) {
      this.deleteCategoryId = id
      this.deleteModal = true
    },
    submit2level () {
      // 区分添加和编辑
      if (this.twoCategory.id) {
        editCategory(this.category, data => {
          console.log(data)
          this.$Message.success('操作成功')
          this.level2Modal = false
          this.loadData()
        })
      } else {
        this.twoCategory.parentId = this.level1EditCategory.id
        addCategory(this.twoCategory, data => {
          this.$Message.success('操作成功')
          this.level2Modal = false
          this.loadData()
        })
      }
    },
    confirmDelete () {
      // 删除类目
      let id = this.deleteCategoryId
      delCategory(id, data => {
        if (data !== '') {
          this.deleteModal = false
          this.$Message.info('当前节点存在子节点,不允许被删除')
        } else {
          this.deleteModal = false
          location.reload()
        }
      })
    },
    cancelDelete () {
      this.deleteModal = false
    },
    cancel2level () {
      this.level2Modal = false
      this.$Message.success('取消成功')
      this.loadData()
    },
    toEditTemplate (cid) {
      this.$router.push({name: 'Template', query: {cid: cid}})
    },
    delTemplate (id) {
      deleteTemplate(id, data => {
        // 跳转回类目页面
        if (data !== '') {
          this.$Message.info('当前类目下暂无产品模板')
        } else {
          location.reload()
        }
      })
    },
    /**
     * 传递过来的是parentId
     * @param pid
     */
    recursionRoot (data, pid) {
      // 最底层id
      data.map(value => {
        this.isHasChildren(value, pid)
      })
    },
    // 最顶层的parentId=null
    isHasChildren (array, pid) {
      if (array.children.length > 0) {
        if (array.id === pid) {
          this.pids.push(array)
          this.recursionRoot(this.treeData, array.parentId)
        } else {
          this.recursionRoot(array.children, pid)
        }
      }
    }
  }
}
</script>

<style scoped>
  .categoryTitle {
    height: 30px;
    border: 0px solid rgba(215, 215, 215, 1);
    border-bottom-width: 1px;
    text-align: center;
    line-height: 30px;
  }
  .dataTree {
    border: 1px solid rgba(215, 215, 215, 1);
  }
  .dataTable {
    margin-top: 10px;
  }
</style>
